<template>
  <el-dialog
    title="补充未填写(广州、紫南)数据"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="missionPart"
  >
    <div class="dataWrite">
      <el-form
        :model="dataForm"
        :inline="true"
        ref="dataForm"
        class="secondForm"
        v-if="cumulativeListHold.length > 0"
      >
        <el-form-item label="日期：" prop="time">
          <el-select
            filterable
            v-model="dataForm.time"
            @change="secondWriteChange"
          >
            <el-option
              v-for="(gItem, index) in dTimeOptions"
              :key="index"
              :label="gItem.date"
              :value="gItem.date"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="margin: 0 0 0 15px;"
            >此处数据为录入紫南和广州这两个点的累计数据</span
          >
        </el-form-item>
      </el-form>
      <el-table
        :data="tableCumulativeList"
        border
        style="width: 100%;"
        height="200px"
      >
        <el-table-column
          prop="area"
          width="100"
          header-align="center"
          align="center"
          label="流量计名称"
        />
        <el-table-column
          prop="flow"
          header-align="center"
          align="center"
          label="流量值"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.flow" placeholder="请输入流量值" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button
        @click="dataFormSubmit"
        type="primary"
        v-if="isAuth('cms:tbCopyFlowData:save')"
        >确认提交</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      stationOptions: [], // 泵站信息
      cumulativeListHold: [], // 广州和紫南数据独立区分
      sTimeOptions: [], // 广州和紫南数据独立时间判断
      tableCumulativeList: [], // 表格广州和紫南数据
      dataForm: {
        time: null // 时间组
      }
    };
  },
  methods: {
    init(cumulativeList, station) {
      this.cumulativeListHold = cumulativeList;
      this.stationOptions = station;
      this.visible = true;
      this.dTimeOptions = [];
      this.tableCumulativeList = [];
      this.$nextTick(() => {
        if (cumulativeList.length > 0) {
          this.$refs["dataForm"].resetFields();
          cumulativeList.forEach(item => {
            this.dTimeOptions.push({ date: item.date });
          });
          this.dataForm.time = cumulativeList[0].date;
          if (cumulativeList[0].ids && cumulativeList[0].ids.length > 0) {
            cumulativeList[0].ids.forEach(sitem => {
              let sestations = this.stationOptions.filter(
                staItem => staItem.id === sitem
              );
              let itemBlock = {
                areaId: sitem,
                area: sestations[0].name,
                date: cumulativeList[0].date,
                flow: null
              };
              this.tableCumulativeList.push(itemBlock);
            });
          }
        }
      });
    },
    // 获取第二时间数据
    secondWriteChange(val) {
      this.tableCumulativeList = [];
      this.$nextTick(() => {
        this.cumulativeListHold.forEach(item => {
          if (item.date === val) {
            if (item.ids && item.ids.length > 0) {
              item.ids.forEach(sitem => {
                let stations = this.stationOptions.filter(
                  staItem => staItem.id === sitem
                );
                let itemBlock = {
                  areaId: sitem,
                  area: stations[0].name,
                  date: val,
                  flow: null
                };
                this.tableCumulativeList.push(itemBlock);
              });
            }
          }
        });
      });
    },
    // 数据提交
    dataFormSubmit() {
      let postList = [];
      // 判断手抄数据是否有，有就可以提交
      this.tableCumulativeList.forEach(item => {
        // 先判断是否有填写流量
        if (item.flow != null || item.flow != "") {
          let PostItem = {
            areaId: item.areaId,
            area: item.area,
            date: item.date,
            flow: parseFloat(item.flow).toFixed(2)
          };
          postList.push(PostItem);
        }
      });
      this.$http({
        url: this.$http.adornUrl("/cms/tbCumulativeFlow/saveBatch"),
        method: "post",
        data: postList
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.visible = false;
              this.$emit("refreshDataList");
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.dataWrite ::v-deep {
  position: relative;
  .el-form {
    position: relative;
    .el-form-item {
      margin: 0 0 10px;
    }
  }
  .secondForm {
    margin: 10px 0 0;
  }
}
</style>
